<template>
  <div class="center_article_container">
    <div class="content" v-if="pagina.total">
      <!-- 文章展示列表 -->
      <div class="end-article-list">
        <MyArticle
          :articleData="item"
          :menu_content="menu_content"
          v-for="item in handlerPaginationNum"
          :key="item.id"
        ></MyArticle>
      </div>
      <!-- 分页器 -->
      <MyPagination :size="pagina.size" :total="pagina.total"></MyPagination>
    </div>
    <div class="empty" v-if="contentLength">😅空空如也...</div>
  </div>
</template>

<script>
import { mapState } from "vuex"; //快速发送

export default {
  name: "CenterArticle",
  computed: {
    ...mapState("tags", ["menu_content"]), //tags为组件名
    ...mapState("user", ["aimUserInfo"]),
    // 处理分页器条数
    handlerPaginationNum() {
      let arr = [];
      let { size, current } = this.pagina;
      let start = size * (current - 1);
      let end = start + size;
      for (let i = start; i < end; i++) {
        if (!this.author_article[i]) break;
        arr.push(this.author_article[i]);
      }
      return arr;
    },
  },
  data() {
    return {
      // 作者文章
      author_article: [],
      // 分页器数据
      pagina: {
        total: 0,
        size: 6,
        current: 1,
      },
      // 是否显示内容为空
      contentLength: false,
    };
  },
  watch: {
    aimUserInfo() {
      this._init_getAuthorArticle();
    },
  },
  methods: {
    // 获取作者文章
    _init_getAuthorArticle() {
      if (!this.aimUserInfo.user_id) return;
      this.$api.getUserArticle(this.aimUserInfo.user_id).then((result) => {
        this.pagina.total = result.data.length;
        if (!this.pagina.total) {
          this.contentLength = true;
        }
        this.author_article = result.data;
        // 关闭加载弹窗
        this.$parent.$parent.loadingResource = false;
      });
    },
    handleCurrentChange(val) {
      // 修改当前页码数
      this.pagina.current = val;
    },
  },
  mounted() {
    this._init_getAuthorArticle();
    this.$parent.active = 2;
  },
};
</script>

<style lang="less" scoped>
// 中间内容的宽度
@width: 1300px;
// .center_article_container {
//   min-width: 700px;
// }
.end-article-list {
  max-width: @width;
  margin: 0 auto;
  position: relative;
  .start-tags {
    position: absolute;
    left: 0;
    top: 20px;
    transform: translateX(-120%);
  }
}
// 处理分页器
.paginatio_container {
  margin: 30px 0 68px;
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 10px;
  font-family: "微软雅黑";
  /deep/ .el-pagination {
    display: flex;
    position: relative !important;
    & > button[disabled] {
      color: #ccc !important;
      background: #f4f4f5 !important;
      opacity: 0.7 !important;
      cursor: url("@/assets/mouse/x1.cur"), auto !important;
    }
    & > button {
      border-color: #ccc0 !important;
      // color: #666 !important;
      color: var(--a-button-hover-color);
      padding: 5px 10px !important;
      line-height: 1 !important;
      background: #f4f5f6 !important;
      position: absolute !important;
      width: 37px !important;
      height: 34px !important;
      &:nth-of-type(1) {
        right: 40px;
        & > i::before {
          font-size: 15px;
          content: "❮";
        }
      }
      &:nth-of-type(2) {
        right: 0px;
        & > i::before {
          font-size: 15px;
          content: "❯";
        }
      }
    }
  }
  /deep/ .el-pager {
    li {
      &.active {
        background: #f4f4f5 !important;
        color: #ccc !important;
        opacity: 0.7 !important;
        cursor: url("@/assets/mouse/x1.cur"), auto !important;
        &:hover {
          color: #ccc !important;
        }
      }
      &:hover {
        color: var(--a-button-hover-color);
      }
      &.el-icon-d-arrow-right {
        &::before {
          line-height: 19px !important;
          content: "\e794" !important;
        }
      }
      &:not(.active) {
        cursor: url("@/assets/mouse/x2.cur"), auto !important;
      }
      font-size: 15px !important;
      border-color: #ccc0;
      color: var(--a-button-hover-color);
      line-height: 34px;
      background: #f4f5f6;
      height: 34px;
      width: 37px;
      border-radius: 6px;
    }
  }
}
</style>